<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form"  layout="vertical" :model="mdl" :rules="rules" >
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('componentName','组件名称')" prop="name">
                                <a-input :placeholder="i18n('componentName','请输入组件名称','input')" style="width: 95%" v-model="mdl.name"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('componentAlias','组件别名')"  prop="alias">
                                <a-input :placeholder="i18n('componentAlias','请输入组件别名','input')" v-model="mdl.alias" style="width: 95%"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('componentType','组件类型')" prop="nodeType">
                                <a-select v-model="mdl.nodeType" style="width: 95%" @change="nodeTypeChange">
                                    <a-select-option value="bpm-activity">{{i18n('activity','普通节点')}}</a-select-option>
                                    <a-select-option value="bpm-select">{{i18n('select','选择节点')}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('classify','分类')" prop="treeId">
                                <rx-category-select v-model="mdl.treeId" cat-key="FORM" style="width: 95%"
                                                    :isGrant="true"></rx-category-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <template>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('type','类型')" prop="type">
                                    <a-select v-model="mdl.type" style="width: 95%" @change="typeChange">
                                        <a-select-option value="script">{{i18n('script','脚本')}}</a-select-option>
                                        <a-select-option value="bean">Bean</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </template>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('enable','启用')" prop="enabled">
                                <a-switch v-model="mdl.enabled==1" @change="enabledChange" size="small"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <template>
                        <a-row>
                            <a-col :span="24">
                                <a-form-model-item prop="config" >
                                    <template #label>
                                        {{i18n('config','配置')}}
                                        <a-tooltip v-if="mdl.nodeType=='bpm-select'">
                                            <template #title>
                                                {{i18n("configTooltip","注意事项：业务组件的选择节点需要返回后续节点ID！")}}
                                            </template>
                                            <a-icon style="margin-top: 3px;" type="question-circle-o"/>
                                        </a-tooltip>
                                    </template>
                                    <rx-input-button v-if="mdl.type=='bean'" @click="setBean" ref="bean"
                                                     v-model="bean"/>
                                    <div v-else>
                                        <rx-monaco-editor
                                            ref="monaco"
                                            v-model="mdl.config"
                                            language="java"
                                            style="height:300px;"
                                        ></rx-monaco-editor>
                                    </div>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </template>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import FormLiteComponentApi from '@/api/form/core/formLiteComponent'
import {RxDialog, BaseFormModel,Util,RxMonacoEditor} from "@lowcode/jpaas-common-lib";
import LiteFlowBeanDialog from "@/views/modules/form/core/dialog/LiteFlowBeanDialog.vue"

export default {
    name: 'FormLiteComponentEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
        RxMonacoEditor
    },
    data() {
        return {
            mdl: {
                treeId: "",
                name: "",
                alias: "",
                nodeType: "bpm-activity",
                type: "script",
                config: "",
                enabled: 0,
            },
            bean:"",
            rules: {
                treeId: [{required: true, message: this.i18n('treeId',"请选择分类","select"), trigger: 'change'}],
                name: [{required: true, message: this.i18n('componentName',"请输入组件名称","input"), trigger: 'change'}],
                alias: [
                    {required: true, message: this.i18n('componentAlias',"请输入组件别名","input"), trigger: 'change'},
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
                nodeType: [{required: true, message: this.i18n('componentType',"请选择组件类型","select"), trigger: 'change'}],
                type: [{required: true, message: this.i18n('type',"请选择类型","select"), trigger: 'change'}],
                config: [{required: true, message: this.i18n('configMessage','"配置不能为空"'), trigger: 'change'}]
            },
            defScript:"/**\n" +
                this.i18n('defScript1','注意：业务组件的选择节点脚本方式需要返回后续节点ID')+"\n" +
                this.i18n('defScript2','例如：return \"nodeId\";')+"\n" +
                "**/"
        }

    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formLiteFlow", key);
        },
        i18n2(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        onload_(data){
            if(!data){
                return;
            }
            if(data.config && data.type=='bean'){
                let item = JSON.parse(data.config);
                this.bean = JSON.stringify({
                    text:item.label,
                    value:item.value,
                })
            }
        },
        get(id) {
            return FormLiteComponentApi.get(id);
        },
        save() {
            return FormLiteComponentApi.save(this.mdl);
        },
        enabledChange(value) {
            this.mdl.enabled = value ? 1 : 0;
        },
        setBean(vm) {
            if (!this.mdl.nodeType) {
                this.$message.warning(this.i18n('componentType',"请选择组件类型","select"));
                return;
            }
            let self =this;
            Util.open({
                component: LiteFlowBeanDialog,
                curVm: this,
                title: this.i18n('processor',"配置处理器"),
                widthHeight: ['800px', '600px'],
                data: {
                    type: this.mdl.nodeType
                }
            }, function (action, data) {
                if (action != 'ok') {
                    return;
                }
                vm.setVal(data.value, data.label);
                self.mdl.config=JSON.stringify({
                    value:data.value,
                    label:data.label
                })
            })
        },
        nodeTypeChange(value){
            if(value == "bpm-select" && !this.mdl.config){
                this.mdl.config = this.defScript;
            }
        },
        typeChange(value){
            //选择节点脚本方式
            if(value == "script" && this.mdl.nodeType=="bpm-select"){
                this.mdl.config = this.defScript;
            }else {
                this.mdl.config = "";
            }
        }

    }
}
</script>
<style>
.relick a {
    margin-right: 10px;
}

</style>
